<template>
	<view class="content">
		
		<view class="topBj"></view>

		<view class="kuang" v-if="videoUrl">
			<view class="shipin">
				<video :src="videoUrl"></video>
			</view>
			<view class="title">{{title}}</view>
		</view>

		<view class="zwsj" v-else>
			<image src="@/static/activity/healthHome/jqqd.png" alt="" />
			</image>
			<view>敬请期待</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '',
				videoUrl: '',
				firstOrder: null,
			}
		},
		onLoad(opt) {
			this.title = opt.title
			this.videoUrl = opt.videoUrl
			this.get_list();
		},
		methods: {
			get_list() {
				var self = this
				self.$boya.Request({
					url: '/activity/article',
					data: {
						type: 18,
					}
				}, function(res) {
					let data = res.data.data
					for (var i = 0; i < data.length; i++) {
						if (data[i].name == '2024普法小课堂') {
							if (data[i].imgs) {
								let img = data[i].imgs.substring(2, data[i].imgs.length - 2);
								data[i].imgs = img
							}
							self.firstOrder = data[i]
						}
					}
					console.log('firstOrder: ', self.firstOrder);
				}, false)
			},
		}
	}
</script>

<style>
	.content {
		width: 100vw;
		min-height: 100vh;
		background: url('https://oss.boyaltd.cn/new_app/activity/nationalDay/gjcbj.png') 100% 100% / 100% 100%;
		padding-bottom: 80rpx;
	}
	
	.topBj {
		width: 100vw;
		height: 298rpx;
		background: url('https://oss.boyaltd.cn/new_app/activity/nationalDay/gjctop.png') 100% 100% / 100% 100%;
	}

	.topTu {
		width: 100vw;
		height: 420rpx;
	}

	.topTu>image {
		width: 100%;
		height: 100%;
	}

	.wenzi {
		width: 90%;
		margin: 0 auto;
	}

	.note {
		width: 92%;
		position: absolute;
		top: 305rpx;
		color: white;
		font-size: 15rpx;
		letter-spacing: 2rpx;
		text-indent: 3em;
		line-height: 20rpx;
	}
	
	.kuang {
		width: 85%;
		margin: 0 auto;
		margin-top: 160rpx;
		border-radius: 20rpx;
		padding: 35rpx;
		background: url('https://oss.boyaltd.cn/new_app/activity/nationalDay/gjchuang.png') 100% 100% / 100% 100%;
	}

	.shipin {
		width: 100%;
		height: 450rpx;
	}
	
	.shipin>video {
		width: 100%;
		height: 100%;
		border-radius: 20rpx;
	}
	
	.title {
		/* color: white; */
		/* color: #113973; */
		font-weight: bold;
		font-size: 40rpx;
		text-align: center;
		margin-top: 35rpx;
	}
	
	.description {
		color: white;
		/* color: #113873; */
		margin-top: 15rpx;
		text-indent: 2em;
	}

	.zwsj {
		width: 60%;
		margin: 0 auto;
		margin-top: 250rpx;
	}

	.zwsj>image {
		width: 100%;
		height: 420rpx;
		/* border: 1px solid black; */
	}

	.zwsj>view {
		font-size: 35rpx;
		text-align: center;
		margin-top: 30rpx;
		color: gray;
	}
</style>